import React, { useState, useEffect } from 'react';
import { Popover, Input, Button, Tooltip } from 'antd';

// 预定义的颜色列表
const presetColors = [
  '#1890ff', // 蓝色
  '#52c41a', // 绿色
  '#faad14', // 黄色
  '#f5222d', // 红色
  '#722ed1', // 紫色
  '#13c2c2', // 青色
  '#eb2f96', // 粉色
  '#fa8c16', // 橙色
  '#a0d911', // 浅绿
  '#2f54eb', // 深蓝
  '#fa541c', // 火红
  '#fadb14', // 明黄
  '#52c41a', // 酸橙
  '#1890ff', // 天蓝
  '#722ed1', // 葡萄紫
  '#eb2f96'  // 玫红
];

/**
 * 简单的颜色选择器组件
 * @param {Object} props 组件属性
 * @param {string} props.value 当前颜色值
 * @param {function} props.onChange 颜色变化回调
 * @param {boolean} props.disabled 是否禁用
 */
const ColorPicker = ({ value, onChange, disabled }) => {
  const [color, setColor] = useState(value || '#1890ff');
  const [visible, setVisible] = useState(false);

  // 当外部value变化时更新内部状态
  useEffect(() => {
    if (value && value !== color) {
      setColor(value);
    }
  }, [value]);

  // 处理颜色变化
  const handleColorChange = (newColor) => {
    setColor(newColor);
    onChange && onChange(newColor);
    setVisible(false);
  };

  // 处理输入框变化
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 验证是否是有效的十六进制颜色值
    if (/^#([0-9A-F]{3}){1,2}$/i.test(inputValue)) {
      setColor(inputValue);
      onChange && onChange(inputValue);
    } else if (inputValue.startsWith('#') && inputValue.length <= 7) {
      setColor(inputValue);
    }
  };

  // 处理输入框失焦
  const handleInputBlur = () => {
    // 如果不是有效的颜色值，恢复为上一个有效值
    if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) {
      setColor(value || '#1890ff');
    }
  };

  // 颜色选择器内容
  const colorPickerContent = (
    <div style={{ width: '240px', padding: '12px' }}>
      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(8, 1fr)', 
        gap: '8px',
        marginBottom: '12px'
      }}>
        {presetColors.map((presetColor, index) => (
          <Tooltip title={presetColor} key={index}>
            <Button
              style={{
                width: '24px',
                height: '24px',
                padding: 0,
                backgroundColor: presetColor,
                border: color === presetColor ? '2px solid #000' : '1px solid #ddd'
              }}
              onClick={() => handleColorChange(presetColor)}
            />
          </Tooltip>
        ))}
      </div>
    </div>
  );

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Popover
        content={colorPickerContent}
        trigger="click"
        open={visible && !disabled}
        onOpenChange={setVisible}
      >
        <Button
          disabled={disabled}
          style={{
            backgroundColor: color,
            width: '32px',
            height: '32px',
            minWidth: '32px',
            borderRadius: '4px',
            marginRight: '8px',
            cursor: disabled ? 'not-allowed' : 'pointer'
          }}
        />
      </Popover>
      <Input
        value={color}
        onChange={handleInputChange}
        onBlur={handleInputBlur}
        disabled={disabled}
        style={{ width: 'calc(100% - 40px)' }}
        placeholder="#RRGGBB"
      />
    </div>
  );
};

export default ColorPicker;